@import "src/assets/scss/base";

.recommend {
  width: 100%;
  padding: 0 1px 6px 1px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(157px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: row dense;
  grid-gap: 21px 13px;

  &_item {
    position: relative;
    width: 157px;
    min-height: 149px;
    border-radius: 11px 12px 14px 17px;
    overflow: hidden;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

    &_bg {
      //width: 157px;
    }

    &_wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      padding: 10px 10px 9px 10px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 22px auto;
      grid-template-rows: 12px 9px;
      grid-column-gap: 3px;
      grid-template-areas: 'a b' 'a c';
    }

    &_image {
      grid-area: a;
      margin-top: 3px;
      width: 22px;
      height: 22px;
      background: rgba(0, 0, 0, 0.00);
      border-radius: 50%;
    }

    &_title {
      width: 140px;
      grid-area: b;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      color: #000000;
      transform: scale(0.75);
      transform-origin: left;
      @include text-ellipsis();
    }

    &_desc {
      width: 210px;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      color: #000000;
      opacity: .8;
      transform: scale(0.5);
      transform-origin: left;
      @include text-ellipsis();
    }

    &_wrap1 {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 11px 9px 5px 11px;
      background: #ffffff;
    }
    &_title1 {
      width: 143px;
      font-size: 12px;
      color: #000000;
      transform: scale(0.91);
      transform-origin: left;
      @include text-ellipsis();
    }
    &_info {
      margin-top: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      &_image1 {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        border-radius: 50%;
      }
      &_name1 {
        flex: 1;
        height: 17.28px;
        line-height: 17.28px;
        font-size: 12px;
        color: #000000;
        opacity: .8;
        transform: scale(0.58);
        transform-origin: left;
        @include text-ellipsis();
      }
      &_like {
        position: absolute;
        top: 2px;
        right: 0;
        width: 50px;
        height: 17.28px;
        line-height: 17.28px;
        font-size: 12px;
        opacity: 0.78;
        transform: scale(0.58);
        transform-origin: right;
        color: #000000;
      }
    }

  }

  &_item:nth-of-type(3n+1) {
    grid-row: auto / span 7;
  }

  &_item:nth-of-type(3n+2) {
    grid-row: auto / span 8;
  }

  &_item:nth-of-type(3n+3) {
    grid-row: auto / span 9;
  }
}
